<template>
  <div class="enter-x login-form">
    <img src="@/assets/images/logo.png" class="w-13 h-13 mb-2 mx-auto block" />
    <div class="text-base font-bold mb-5 text-center">欢迎登录</div>

    <AForm
      :model="formData"
      :rules="getFormRules"
      ref="formRef"
      :hideRequiredMark="true"
      @keypress.enter="handleLogin"
      layout="vertical"
      class="w-65"
    >
      <AFormItem name="account" class="enter-x" label="用户名">
        <AInput
          size="large"
          v-model:value="formData.account"
          placeholder="用户名"
          class="fix-auto-fill"
        />
      </AFormItem>
      <AFormItem name="password" class="enter-x" label="密码">
        <AInputPassword
          size="large"
          v-model:value="formData.password"
          placeholder="密码"
          :visibilityToggle="false"
        />
      </AFormItem>

      <AFormItem class="enter-x mt-12">
        <GButton
          type="primary"
          size="large"
          block
          @click="handleLogin"
          :loading="loading"
          class="shadow-[0px_6px_12px_0px_rgba(1,154,247,0.26)] !py-2.5 !h-auto"
        >
          立即登录
        </GButton>
      </AFormItem>
    </AForm>
  </div>
</template>
<script lang="ts" setup>
  import { useMessage } from '@/hooks/web/useMessage';

  import { useUserStore } from '@/store/modules/user';
  import { onKeyStroke } from '@vueuse/core';
  import { useFormRules, useFormValid } from './useLogin';

  const { getFormRules } = useFormRules();

  const { notification } = useMessage();

  const userStore = useUserStore();

  const formRef = ref();
  const loading = ref(false);

  const formData = reactive({
    account: 'admin',
    password: '123456',
  });

  onKeyStroke('Enter', handleLogin);

  const { validForm } = useFormValid(formRef);

  async function handleLogin() {
    const data = await validForm();
    if (!data) return;
    try {
      loading.value = true;
      const userInfo = await userStore.login({
        ...data,
      });
      if (userInfo) {
        notification.success({
          message: '登录成功',
          description: `欢迎回来: ${userInfo.userName}`,
          duration: 3,
        });
      }
    } catch (error) {
      console.log(error);
      // createErrorModal({
      //   title: t('sys.api.errorTip'),
      //   content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
      //   getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
      // });
    } finally {
      loading.value = false;
    }
  }
</script>

<style lang="less" scoped>
  .login-form {
    @apply pt-15 px-13 pt-15 pb-22 bg-white;

    :deep {
      .ant-form-item-label > label {
        @apply text-xs text-black/65;
      }
    }
  }
</style>
